<template>
	<view class="">
		<uni-fab @trigger="clickMnus" :content="mnus"></uni-fab>
		<v-tabs activeColor="white" v-model="curtab" pills :tabs="['推荐', '关注', '同城', '热门', '最新', '免费', '自拍', '影片']"></v-tabs>
		<scroll-view style="height: 85vh" scroll-y enhanced enable-back-to-top scroll-with-animation lower-threshold="50" scroll-anchoring
		@scrolltolower="loadMore(10)" refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="refresh(10)">
			<view :style="{height: `${scrollHeight}px`}">
				<view v-for="(box, idx) in boxes" :key="idx" class="item" :ref="`img_${idx}`" @click="goPlay(box, idx)"
				style="width: 370rpx;background: gray;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;color:white" 
				:style="{float:box.float, marginTop:`${gap}rpx`}">
					<image style="width: 100%;" webp lazy-load :src="box.url | poster(box.poster, box.duration)"
					:style="{height: `${box.height}rpx`}"
					></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	
	export default {
		components:{
			vTabs,
		},
		data() {
			return {
				mnus:[
					{text:'视频'},
					{text:'相册'},
					{text:'图文'},
					{text:'录音'},
					{text:'盒子'},
					{text:'小说'},
				],
				page:0,
				size:10,
				curtab:0,
				left:'',
				right:'',
				gap:10,
				refreshing:false,
				boxes:[],
				scrollHeight:'',
				scrWidth: uni.getSystemInfoSync().screenWidth,
			}
		},
		
		async onLoad() {
			await this.loadMore(10)
		},

		methods: {
			clickMnus(evt){
				switch(evt.index){
					case 0:
					uni.navigateTo({
						url: '../upload-video/upload-video',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					break
				}
			},
			
			goPlay(video, idx){
				uni.navigateTo({
					url: `../preview-video/preview-video?_id=${video._id}`,
				});
			},
			
			async refresh(count=10){
				this.refreshing = Math.random()
				this.boxes = []
				this.left = this.right = 0
				this.page = 0
				await this.loadMore(count)
				this.refreshing = false
			},
			
			async loadMore(count=10){
				const {result:videos} = await uniCloud.callFunction({
					name:'getVideos',
					data:{
						page: ++this.page,
						size: this.size
					}
				})
				const len = this.boxes.length
				console.log(videos)
				
				for (let i = 0; i < videos.length; i++) {
					const video = videos[i]
					const width = this.scrWidth - this.gap
					const r = video.height/video.width
					const height = width*r
					let float = 'left'
					if(!this.left){
						float = 'left'
						this.left = 'img_0'
					}else if(!this.right){
						float = 'right'
						this.right = 'img_1'
					}else{
						// 查询底部
						const left = this.$refs[this.left][0].$el, right = this.$refs[this.right][0].$el
						console.log(left, left.clientHeight, right, right.clientHeight)
						if(left.offsetTop + left.offsetHeight <= right.offsetTop + right.offsetHeight){
							float = 'left'
							this.left = `img_${len+i}`
							this.scrollHeight = left.offsetTop + left.offsetHeight
						}else{
							float = 'right'
							this.right = `img_${len+i}`
							this.scrollHeight = right.offsetTop + right.offsetHeight
						}
					}
					this.boxes.push({
						...video,
						width, height, float,
					})
					console.log(this.boxes)
					await this.$nextTick()
				}
				
			}
		},
		async onReachBottom() {
			await this.loadMore(10)
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	image{
		width: 100%;
		height: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.item{
		overflow: hidden;
	}

	.waterfall-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap:10rpx;
		grid-auto-flow: row dense;
	}
</style>
